<template>
    <div
        class="MobilePhoneCheck box_card_body"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>查询类 --> 证件号/预留手机号码查询持卡人</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <el-form ref="formData" :rules="rules" :model="formData" label-width="130px">
                    <el-row>
                        <el-col :span="24">
                            <div class="text_center leftWidth30">
                                <el-form-item label="手机号:" class="text_fl">
                                    <el-input v-model.trim="formData.MOPHONE"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="text_center leftWidth30">
                                <el-form-item label="证件号码:" class="text_fl">
                                    <el-input v-model.trim="formData.IDNO"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <div class="text_center leftWidth30">
                                <el-form-item label="客户姓名:" class="text_fl">
                                    <el-input v-model.trim="formData.NAME"></el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                    <div class="successMessage" v-if="ifcheck">
                        <span
                            :class="{'success_class':isShowClass1,'error_class':!isShowClass1}"
                        >{{resultdesc}}</span>
                    </div>

                    <div style="text-align:left;    margin: 10px 60px auto;">
                        <el-button type="primary" size="small" @click="handleClickbtn">查 验</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="updateCustInfo"
                            v-show="ifcheck"
                        >客户资料查询及修改</el-button>
                    </div>
                </el-form>

                <!-- 话术 -->
                <div class="hstable_wrap" v-if="speechList.length!=0">
                    <el-table
                        :data="speechList"
                        border
                        stripe
                        header-row-class-name="headerRow"
                        ref="showListTable"
                        class="heard-bg business_table hstable"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" label=" " min-width="55"></el-table-column>
                        <el-table-column label="业务话术">
                            <template slot-scope="scope">{{scope.row.content}}</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import {
    closePage, getDictSelectList, getBusinessMenuId
} from '@/utils/Common';
export default {
    name: 'MobilePhoneCheck',
    data() {
        return {
            formData: {
                MOPHONE: '',
                IDNO: '',
                NAME: '',
            },
            pageLoading: false,
            centerDialogVisible: false,
            centerDialogVisibleFlag: false,
            rules: {
                MOPHONE: [{ required: true, message: '手机号不能为空！', trigger: 'blur' },
                ],
            },
            BALNCE: '',//账面余额
            CREDITLIMIT: '',
            RTNIND: '',//翻页标志
            IDList: [],//证件列表
            CUSTID_value: '',//选中的卡号
            certificateTypeList: '',//
            CUSTID: '',//
            KEYTYPE: '',//
            last_CUSTID: '',//循环体里 最后的一条数据
            last_KEYTYPE: '',//循环体里 最后的一条数据
            speechList: [],//话术列表
            selectedList: [],
            ifcheck: false,
            isShowClass1: '',
            resultdesc: '',
            MenuId: '',
        }
    },
    computed: {
        ...mapGetters([
            'defaultParams',
            'pinFlag',
            'isCurrentMenuInfo',
            'customerInfo_3002',
            'businessMenu',
            'currentSessionObj',
        ])
    },
    filters: {
        filterKetype: (value, certificateTypeList) => {
            value = (`${value}`).trim();
            for (let index = 0; index < certificateTypeList.length; index++) {
                const element = certificateTypeList[index];
                if (element.code === value) {
                    return element.label;
                }
            }
        },
    },
    async mounted() {
        this.getDicListFun();
        await this.getspeechList();
    },
    methods: {
        // 查字典
        async getDicListFun() {
            // 获取证件类型下拉选择列表
            this.certificateTypeList = await getDictSelectList('IDTYPE', this);
            let anis = '';

            if (!(this.currentSessionObj.ani === '' || this.currentSessionObj.ani === undefined)) {
                anis = this.currentSessionObj.ani.trim();
                anis = anis.substring(anis.length - 11, anis.length);
            } else {
                anis = this.customerInfo_3002.MOBILEPHONE.trim();
            }

            this.formData.MOPHONE = anis;

            this.formData.IDNO = this.customerInfo_3002.CUSTID.trim(); //身份证号码
            this.formData.NAME = this.customerInfo_3002.CHINAME.trim(); //客户姓名
        },
        //根据菜单id查询话术列表
        async getspeechList() {
            console.log("this.isCurrentMenuInfo.id", this.isCurrentMenuInfo.id);
            var checkParam = {
                'id': this.isCurrentMenuInfo.id,
            };
            this.$post.busiMenu.getlistByMenuId(checkParam).then((res) => {
                console.log("话术查询结果：", res);
                if (res.status === 200) { // http通讯成功
                    if (res.data.status == 0) { // 业务请求成功
                        this.speechList = res.data.content;
                    }
                }
            });
        },
        handleSelectionChange(val) {
            this.selectedList = val;
        },
        // 0110核验手机号码
        async getIdCardInfo() {
            const appBody = {
                MblNum: this.formData.MOPHONE, // 手机号码
                IdentNo: this.formData.IDNO, //身份证号码
                CusNm: this.formData.NAME, //客户姓名
                Opr: '',//运营商
                SctrCd: '01017K',//部门代码

            };
            const params = JSON.parse(JSON.stringify(this.defaultParams));
            params.body.appHead.tranCode = '0110';
            params.body.appBody = appBody;

            // 跑 3072 交易
            this.$post.common.esbtran(params).then((res) => {
                this.pageLoading = false;
                if (res.status === 200) { // 接口请求成功
                    this.ifcheck = true;//已做过借记卡校验
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result -- 0110');
                    if (result.sysHead.rspCd === '000000') {
                        console.log("核验结果：", result.body.appBody.AprvRslt);
                        if (result.body.appBody.AprvRslt === '1') {

                            this.isShowClass1 = true;
                            this.resultdesc = '验证一致';
                        } else {
                            this.isShowClass1 = false;
                            this.resultdesc = '验证不一致';
                        }

                    } else {
                        // const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspDesc}`;
                        // this.$alert(errorMsg, result.sysHead.rspDesc, {
                        //     customClass: 'error', type: 'error',
                        // });
                        this.isShowClass1 = false;
                        this.resultdesc = result.sysHead.rspDesc;
                    }
                } else {
                    this.$message.error('请求失败');

                }
            });
        },
        handleClickbtn() {
            this.IDList = [];
            this.$refs.formData.validate((valid) => {
                if (valid) {
                    this.pageLoading = true;
                    this.getIdCardInfo();
                }
            });
        },
        //修改记录查询
        updateCustInfo() {
            this.MenuId = getBusinessMenuId('/customerInfomationChange/customerInfoChange', this.businessMenu);
            console.log('this.MenuId____', this.MenuId);
            this.$router.push({ name: 'customerInfoChange', path: '/customerInfomationChange/customerInfoChange', params: { id: this.MenuId } });
        },
        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },
    }
}
</script>
<style lang='scss' scoped>
.butclass {
    position: absolute;
    margin-left: 20px;
}
</style>
<style lang='scss'>
.MobilePhoneCheck {
    .el-form-item {
        .el-form-item__content {
            .el-input {
                width: unset;
            }
        }
    }
    .margin_20 {
        margin: 20px 0;
    }
    .successMessage {
        line-height: 34px;
        text-align: left;
        margin-bottom: 20px;
        margin-left: 60px;
        span.success_class {
            color: #fff;
            display: inline-block;
            padding: 2px 10px;
            background-color: #409eff;
            border: 1px solid #409eff;
            border-radius: 8px;
            font-size: 15px;
        }
        span.error_class {
            color: #fff;
            display: inline-block;
            padding: 2px 10px;
            background-color: #cd4435;
            border: 1px solid #cd4435;
            border-radius: 8px;
            font-size: 15px;
        }
    }
}
</style>